/**
 *@auther: tang
 @Date: 2020-11-09
 *Project: group-booking-shop-manage-system
 */

import React, { Component } from "react";
import { Redirect } from "react-router-dom"; //重定向使用
import Req from "./api"
import {Observer,inject} from "mobx-react"
import {message} from "antd"
@inject("userStore")
@Observer
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
            rediectToReferrer: false, // 是否重定向之前的界面
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSumit = this.handleSumit.bind(this);
    }
    // 处理用户名、密码的变化
    handleChange(e) {
        if (e.target.name === "username") {
            this.setState({
                username: e.target.value,
            });
        } else if (e.target.name === "password") {
            this.setState({
                password: e.target.value,
            });
        }
    }
    // 提交登录表单
    async handleSumit(e) {
        e.preventDefault();
        const username = this.state.username;
        const password = this.state.password;
        if (username.length === 0 || password.length === 0) {
            message.error("用户名或密码不能为空")
            return;
        }
        Req.userLogin().then(res=>{
            console.log(res);
            message.success("登录成功")
            // 保存信息到sessionStorage
            //将信息保存到mobx
            this.props.userStore.menuInfo = res.data.menuInfo;
            this.props.userStore.userInfo = res.data.userInfo;
            this.props.userStore.token = res.token
            // 登录成功后，设置redirectToReferrer为true;
            this.setState({
                rediectToReferrer: true,
            });
            console.log(this.props.location)
            // 登陆成功之后的跳转
            this.props.history.push({pathname:"/index"});
        }).catch(err=>{
            console.log(err);
            message.error("用户名或密码错误")
        })

    }
    render() {
        return (
            <form className="login" onSubmit={this.handleSumit}>
                <div>
                    <label htmlFor="">
                        用户名：
                        <input
                            type="text"
                            name="username"
                            value={this.state.username}
                            onChange={this.handleChange}
                        />
                    </label>
                </div>
                <div>
                    <label htmlFor="">
                        密码：
                        <input
                            type="password"
                            name="password"
                            value={this.state.password}
                            onChange={this.handleChange}
                        />
                    </label>
                </div>
                <input type="submit" value="登录" />
            </form>
        );
    }
}
export default Login;
